<template>
    <div class="quality-certification">
        <div class="quality-title">
            <div class="quality-title-content clear-float">
                <span :class="{'green-white': step1}">提交身份证认证</span>
                <span :class="{'green-white': step2}">提交驾驶证认证</span>
                <i :class="{'green-color': step1, 'green-hook': step2}">1</i>
                <i :class="{'green-color': step2}">2</i>
            </div>
        </div>
        <!-- <toast-tip v-show="tipVisible" :msg="msg"></toast-tip> -->
        <ul class="quality-content">
            <div class="quality-tip" v-show="step2">提交 身份证 认证</div>
            <li class="identity" v-show="step1">
                <p>提交 <span class="green-color">身份证</span> 认证</p>
                <ol>
                    <li>
                        <upload-pic :style="{backgroundImage:'url(' + identityUrl1 + ')', backgroundColor:'rgba(0,0,0,0.10)', backgroundSize:'100% 100%'}" @receiveImg="receiveIdentity1($event)"></upload-pic>
                        <p>拍摄身份证照片面</p>
                    </li>
                    <li>
                        <upload-pic :style="{backgroundImage:'url(' + identityUrl2 + ')', backgroundColor:'rgba(0,0,0,0.10)', backgroundSize:'100% 100%'}" @receiveImg="receiveIdentity2($event)"></upload-pic>
                        <p>拍摄身份证国徽面</p>
                    </li>
                </ol>
                <div>
                    <label for="">身份证姓名</label>
                    <input type="text" v-model="identityName">
                </div>
                <div>
                    <label for="">身份证号</label>
                    <input type="text" maxlength="18" v-model="identityNum">
                </div>
                <button type="button" :class="{'green-bg': greenBg}" @click="identityUpload()">确认信息 下一步拍摄面部照片</button>
            </li>
            <li class="face" v-show="false">
                <p>1.2 完成面部照片拍摄</p>
                <img src="" alt="">
                <button type="button" :class="{'green-bg': greenBg}">确认信息 下一步驾驶证认证</button>
            </li>
            <li class="drive" v-show="step2">
                <p>提交 <span class="green-color">驾驶证</span> 认证</p>
                <ol>
                    <li>
                        <upload-pic :style="{backgroundImage:'url(' + driveUrl1 + ')', backgroundColor:'rgba(0,0,0,0.10)', backgroundSize:'100% 100%'}" @receiveImg="receiveDrive1"></upload-pic>
                        <p>拍摄驾驶证主页</p>
                    </li>
                    <li>
                        <upload-pic :style="{backgroundImage:'url(' + driveUrl2 + ')', backgroundColor:'rgba(0,0,0,0.10)', backgroundSize:'100% 100%'}" @receiveImg="receiveDrive2"></upload-pic>
                        <p>拍摄驾驶证副页</p>
                    </li>
                </ol>
                <div>
                    <label for="">驾驶证编号</label>
                    <input type="text" v-model="driveNum">
                </div>
                <button type="button" :class="{'green-bg': greenBg}" @click="driveUpload()">确认信息 下一步缴纳押金</button>
            </li>
            <div class="quality-tip" v-show="step1">提交 驾驶证 认证</div>
        </ul>
    </div>
</template>

<script>
import UploadPic from "../components/UploadPic"
import ToastTip from "../components/ToastTip"
import qs from "qs"
export default {
    components: {
        UploadPic,
        ToastTip,
    },
    mounted () {
        // 状态
        // this.axios.post("",{})
        // then(res => {

        // })
    },
    methods: {
        identityUpload () {
            // if (this.identityUrl1 && this.identityUrl2 && this.nameCheck(this.identityName) && this.idCheck(this.identityNum) && this.greenBg) {
            if (this.identityUrl1 && this.identityUrl2 && this.identityName && this.identityNum && this.greenBg) {
                this.requestFn(2, this.identityUrl1, this.identityUrl2, this.identityName, this.identityNum);
            }
            // this.step1 = false;
            // this.step2 = true;
            // this.greenBg = false;
        },
        driveUpload () {
            // if (this.driveUrl1 && this.driveUrl2 && this.nameCheck(this.driveName) && this.driveCheck(this.driveNum) && this.greenBg) {
            if (this.driveUrl1 && this.driveUrl2 && this.driveNum && this.greenBg) {
                this.requestFn(4, this.driveUrl1, this.driveUrl2, this.driveNum);
            }

            // this.greenBg = false;
            // this.$router.push({path: "PayDeposit"})
        },
        requestFn (type, params1, params2, params3, params4) {
            console.log(type);
            let apiUrl, data,
            _this = this;
            if (type == 1) {//身份证ocr
                apiUrl = "/user/userCardLicenseFB.json";
                data = {
                    ocr_cardImg_f: params1,
                    ocr_cardImg_b: params2,
                    // test: "哈哈哈",
                }
            } else if (type ==2) {//身份证 照片上传
                apiUrl = "/user/userCardLicense.json";
                data = {

                    // cardImg_F: params1,
                    // cardImg_B: params2,
                    // user_IDName: params3,
                    // user_cardID: params4,

                    // ocr_IDSex: _this.identityInfo.ocr_IDSex,
                    // ocr_IDBirthday: _this.identityInfo.ocr_IDBirthday,
                    // ocr_IDNation: _this.identityInfo.ocr_IDNation,
                    // ocr_IDAddress: _this.identityInfo.ocr_IDAddress,

                    // ocr_IDValidityDate: _this.identityInfo.ocr_IDValidityDate,
                    // ocr_IDValidityStart: _this.identityInfo.ocr_IDValidityStart,
                    // ocr_IDValidityEnd: _this.identityInfo.ocr_IDValidityEnd,

                    ocr_cardImg_f: encodeURI(params1),
                    ocr_cardImg_b: encodeURI(params2),
                    user_IDName: encodeURI(params3),
                    user_cardID: encodeURI(params4),

                    ocr_IDSex: encodeURI(_this.identityInfo.ocr_IDSex),
                    ocr_IDBirthday: encodeURI(_this.identityInfo.ocr_IDBirthday),
                    ocr_IDNation: encodeURI(_this.identityInfo.ocr_IDNation),
                    ocr_IDAddress: encodeURI(_this.identityInfo.ocr_IDAddress),

                    ocr_IDValidityDate: encodeURI(_this.identityInfo.ocr_IDValidityDate),
                    ocr_IDValidityStart: encodeURI(_this.identityInfo.ocr_IDValidityStart),
                    ocr_IDValidityEnd: encodeURI(_this.identityInfo.ocr_IDValidityEnd),

                }
            } else if (type == 3) {//驾驶证orc
                apiUrl = "/user/userDriverLicenseO.json";
                data = {
                    ocr_license_O: params1,
                }
            } else if (type == 4) {//驾驶证照片上传
                apiUrl = "/user/userDriverLicense.json";
                data = {
                    ocr_license_O: encodeURI(params1),
                    ocr_license_C: encodeURI(params2),
                    ocr_licenseID: encodeURI(params3),

                    ocr_name: encodeURI(_this.driveInfo.ocr_name),
                    ocr_sex: encodeURI(_this.driveInfo.ocr_sex),

                    ocr_nationality: encodeURI(_this.driveInfo.ocr_nationality),
                    ocr_address: encodeURI(_this.driveInfo.ocr_address),
                    ocr_birthday: encodeURI(_this.driveInfo.ocr_birthday),
                    ocr_fristDate: encodeURI(_this.driveInfo.ocr_fristDate),
                    ocr_driverType: encodeURI(_this.driveInfo.ocr_driverType),

                    db_validityDate: encodeURI(_this.driveInfo.db_validityDate),
                    // archiveID: encodeURI(_this.driveInfo.archiveID),

                }
            }
            data.access_token = sessionStorage.token;
            this.axios.post(apiUrl,
                qs.stringify(
                data
            )
            )
            .then(res => {
                console.log(res.data.code);
                console.log(type);
                if (res.data.code == 200) {
                    if (type == 1) {
                        // debugger
                        _this.identityName = res.data.modelData.userLicenseVO.ocr_IDName;
                        _this.identityNum = res.data.modelData.userLicenseVO.ocr_cardID;
                        _this.identityInfo = res.data.modelData.userLicenseVO;
                        _this.greenBg = true;
                    } else if (type == 2) {
                        _this.step1 = false;
                        _this.step2 = true;
                        _this.greenBg = false;
                    } else if (type == 3) {
                        _this.driveNum = res.data.modelData.userLicenseVO.ocr_licenseID;
                        _this.driveInfo = res.data.modelData.userLicenseVO;
                        _this.greenBg = true;
                    } else if (type == 4) {
                        _this.$router.push({path: "./QualitySucc"});
                    }
                }
                console.log(this, _this, _this.greenBg);
            })
        },
        receiveIdentity1 (data) {
            console.log("父组件:", data);
            this.identityUrl1 = data;
            if (this.identityUrl2) {
                this.requestFn(1, this.identityUrl1, this.identityUrl2);
            }
        },
        receiveIdentity2 (data) {
            console.log("父组件:", data);
            this.identityUrl2 = data;
            console.log(this.identityUrl1);
            if (this.identityUrl1) {
                this.requestFn(1, this.identityUrl1, this.identityUrl2);
            }
            console.log(this.greenBg);
        },
        receiveDrive1 (data) {
            console.log("父组件:", data);
            this.driveUrl1 = data;
            if (this.driveUrl2) {
                this.requestFn(3, this.driveUrl1, this.driveUrl2);
            }
        },
        receiveDrive2 (data) {
            console.log("父组件:", data);
            this.driveUrl2 = data;
            if (this.driveUrl1) {
                this.requestFn(3, this.driveUrl1, this.driveUrl2);
            }
        },
        idCheck (params) {
            var patt = /^{}$/;
            if (patt.test(params)) {
                return true;
            }
        },
        nameCheck (params) {
            var patt = /^{}$/;
        },
        driveCheck (params) {
            var patt = /^{}$/;
        }
    },

    data () {
        return {
            config: {},
            // 第几步
            step1: true,
            step2: false,
            // step1: false,
            // step2: true,

            // 身份证
            identityInfo: {},
            identityUrl1: "",
            identityUrl2: "",
            identityName: "",
            identityNum: "",

            // 驾驶证
            driveInfo: {},
            driveUrl1: "",
            driveUrl2: "",
            driveNum: "",

            // 绿色背景
            greenBg: false,

            // 提示
            tipVisible: false,
            tipVisible: true,
            msg: "哈哈哈",
        }
    }
 }
</script>

<style scoped>
    .quality-title {
        width: 100%;
        height: 140px;
        padding-top: 30px;
        margin-bottom: 30px;
        background: #fff;
        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.05);
    }
    .quality-title-content {
        width: 690px;
        height: 80px;
        margin: 0 auto;
        padding: 8px 0 8px 42px;

        position: relative;

        background: #f5f5f5;
        border-radius: 74px;
    }
    .quality-title-content span {
        display: block;
        float: left;
        width: 332px;
        height: 64px;
        padding-top: 13px;
        padding-left: 50px;
        /*background: #0db95f;*/
        text-align: left;

        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #aaa;
        letter-spacing: 0;
    }
    .quality-title-content span:last-of-type {
        width: 305px;
        border-radius: 0 34px 34px 0;
    }
    .quality-title-content .green-white {
        background-color: #0db95f;
        color: #fff;
    }
    .quality-title-content i {
        display: block;
        width: 68px;
        height: 68px;
        padding-top: 10px;
        text-align: center;
        background: #fff;
        border-radius: 50%;

        position: absolute;
        left: 8px;
        top: 6px;

        font-family: PingFangSC-Regular;
        font-size: 36px;
        color: #aaa;
        letter-spacing: 0;
    }
    .quality-title-content i:last-of-type {
        left: 340px;
    }
    .quality-title-content .green-color {
        color: #0db95f;
    }
    .quality-title-content .green-hook {
        background-color: #0db95f;
        font-size: 0;
    }
    .green-hook:after {
        content: "";
        display: block;
        widows: 30px;
        height: 20px;
        border-color: transparent transparent #fff #fff;
        border-style: solid;
        border-width: 8px;
        transform: rotate(-45deg);

    }
    /*认证内容*/
    .quality-content {
        padding: 0 30px;
        background-color: #fff;
    }
    .quality-content .green-color {
        color: #0db95f;
    }
    ul>li {
        width: 690px;
        height: 100px;
        padding: 32px 30px 30px;
        margin-bottom: 20px;
        background: #f5f5f5;
        border-radius: 10px;
        text-align: left;

        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #aaa;
        letter-spacing: 0;
    }
    .identity {
        height: auto;
        background-color: #fff;
        background-color: #f3fbf7;
        color: #333;
        border: 2px solid #0db95f;
    }
    ol {
        display: flex;
        justify-content: space-between;

        margin-top: 20px;
        margin-bottom: 30px;
    }
    ol li {
        text-align: center;
    }
    ol li>div{
        margin-bottom: 22px;
        background: rgba(0,0,0,0.10);
    }
    ol li img {
        width: 296px;
        height: 196px;
        border-radius: 10px;
        background: rgba(0,0,0,0.20);
        margin-bottom: 22px;
    }
    ol li p {
        color: #aaa;
    }
    label {
        display: inline-block;
        width: 120px;
        text-align: right;
        /*margin-right: 18px;*/

        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #aaa;
        letter-spacing: 0;
    }
    input {
        width: 492px;
        height: 60px;
        background-color: #f5f5f5;
        background: #e3f2ea;;
        margin-bottom: 22px;
        text-indent: 16px;

        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #333;
        letter-spacing: 0;
    }
    button {
        width: 630px;
        height: 100px;
        background: #dcdcdc;
        border-radius: 50px;
        padding-right: 35px;
        margin-top: 6px;

        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #fff;
        letter-spacing: 0;
    }
    .green-bg {
        background: #0db95f;
    }
    .face {
        height: auto;
        background-color: #fff;
        color: #333;
        border: 2px solid #0db95f;
    }
    .face img {
        width: 204px;
        height: 272px;
        background-color: #ececec;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 28px;
    }
    .drive {
        height: auto;
        background-color: #fff;
        color: #333;
        border: 2px solid #0db95f;
    }
    .quality-tip {
        height: 100px;
        line-height: 100px;
        margin-bottom: 30px;
        background: #f5f5f5;
        border-radius: 10px;
        text-indent: 30px;

        font-family: PingFangSC-Regular;
        font-size: 26px;
        color: #aaaaaa;
        letter-spacing: 0;
    }
</style>
